Skip to content

chore(ui,shared,localizations): UX improvements for <ConfigureSSO />#8601

Open
LauraBeatris wants to merge 16 commits into
mainfrom
laura/self-serve-sso-improvements
Open

chore(ui,shared,localizations): UX improvements for <ConfigureSSO />#8601
LauraBeatris wants to merge 16 commits into
mainfrom
laura/self-serve-sso-improvements

Conversation

@LauraBeatris
Copy link
Copy Markdown
Member

@LauraBeatris LauraBeatris commented May 20, 2026

Description

  • Moves verify domain step as the first one, to clarify which domain the user is setting up the enterprise connection
  • Update select provider step, to only include header title/description
  • Add UI descriptors to each step
  • Improve test step structure (new empty CTA, open test URL button)
CleanShot 2026-05-20 at 19 24 55 CleanShot 2026-05-20 at 19 24 26

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@LauraBeatris LauraBeatris self-assigned this May 20, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented May 20, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment May 22, 2026 6:32pm

Request Review

@github-actions github-actions Bot added the ui label May 20, 2026
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 20, 2026

🦋 Changeset detected

Latest commit: ff961e4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 20 packages
Name Type
@clerk/localizations Patch
@clerk/shared Patch
@clerk/ui Patch
@clerk/react Patch
@clerk/astro Patch
@clerk/backend Patch
@clerk/chrome-extension Patch
@clerk/clerk-js Patch
@clerk/expo-passkeys Patch
@clerk/expo Patch
@clerk/express Patch
@clerk/fastify Patch
@clerk/hono Patch
@clerk/msw Patch
@clerk/nextjs Patch
@clerk/nuxt Patch
@clerk/react-router Patch
@clerk/tanstack-react-start Patch
@clerk/testing Patch
@clerk/vue Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@LauraBeatris LauraBeatris force-pushed the laura/self-serve-sso-improvements branch from ba679b7 to 9774083 Compare May 20, 2026 14:42
@LauraBeatris LauraBeatris changed the title chore(ui): UI improvements for self-serve SSO flow chore(ui): UX improvements for self-serve SSO flow May 20, 2026
@LauraBeatris LauraBeatris force-pushed the laura/self-serve-sso-improvements branch from 1279e85 to 23d3243 Compare May 20, 2026 22:10
@LauraBeatris LauraBeatris requested a review from a team May 20, 2026 22:21
@LauraBeatris LauraBeatris marked this pull request as ready for review May 20, 2026 22:21
@LauraBeatris LauraBeatris changed the base branch from laura/add-self-serve-sso-org-profile to main May 20, 2026 22:21
@LauraBeatris LauraBeatris force-pushed the laura/self-serve-sso-improvements branch from dc5d30e to f1c419e Compare May 20, 2026 22:22
@LauraBeatris LauraBeatris changed the title chore(ui): UX improvements for self-serve SSO flow chore(ui): UX improvements for <ConfigureSSO /> May 20, 2026
@LauraBeatris LauraBeatris changed the title chore(ui): UX improvements for <ConfigureSSO /> chore(ui,shared,localizations): UX improvements for <ConfigureSSO /> May 20, 2026
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 20, 2026

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8601

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8601

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8601

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8601

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8601

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8601

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8601

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8601

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8601

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8601

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8601

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8601

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8601

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8601

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8601

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8601

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8601

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8601

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8601

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8601

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8601

commit: ff961e4

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 20, 2026

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

This PR updates Configure SSO end-to-end: many locale files now reference Single Sign-On (SSO) and simplify the select-provider localization shape; shared localization types were adjusted (selectProviderStep, testUrl action label, testResults.empty, provider-specific saml attributeMapping); UI changes include rehydrating provider selection, removing enterprise-connection creation from verify-domain, conditional mounting of select-provider, changing the permission key to org:sys_entconns:manage, refactoring ConfigureStep to provider-driven attribute mapping, adding an Open test URL flow and test-results empty state, instrumenting UI with elementDescriptor/elementId keys, and adding a primary-email-domain footer in the navbar. Tests were updated to reflect copy and permission-key changes.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: UX improvements to the ConfigureSSO component affecting the ui, shared, and localizations packages.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description check ✅ Passed The PR description clearly relates to the changeset, detailing UX improvements for the ConfigureSSO component including step reordering, UI descriptors, and test step enhancements.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx (1)

372-381: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Clickable table rows are mouse-only; keyboard users can’t open test-run details.

The row action is bound only to onClick on <Tr>, so the drawer cannot be triggered via keyboard navigation. Please make the row action keyboard-accessible (focusable + Enter/Space activation) or use a semantic interactive element inside cells.

Suggested fix
 <Tr
   key={row.id}
   elementDescriptor={descriptors.configureSSOTestResultsRow}
+  role='button'
+  tabIndex={0}
   onClick={() => setSelectedTestRun(row)}
+  onKeyDown={e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setSelectedTestRun(row);
+    }
+  }}
   sx={t => ({
     cursor: 'pointer',
     '&:hover > td': {
       backgroundColor: t.colors.$neutralAlpha50,
     },
   })}
 >

As per coding guidelines: "Implement proper focus management for keyboard navigation in React components" and "Implement proper tab order in React components".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx`
around lines 372 - 381, The table row <Tr> with key={row.id} and
elementDescriptor={descriptors.configureSSOTestResultsRow} only handles onClick
so keyboard users cannot open a test run; make it keyboard-accessible by adding
tabIndex={0} (or wrapping an interactive element inside the cells), add a
onKeyDown handler that calls setSelectedTestRun(row) when Enter or Space is
pressed, and include an appropriate role (e.g., role="button") and
aria-label/aria-describedby as needed to convey purpose; ensure styling and
focus outline are preserved so keyboard focus is visible.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx`:
- Around line 372-381: The table row <Tr> with key={row.id} and
elementDescriptor={descriptors.configureSSOTestResultsRow} only handles onClick
so keyboard users cannot open a test run; make it keyboard-accessible by adding
tabIndex={0} (or wrapping an interactive element inside the cells), add a
onKeyDown handler that calls setSelectedTestRun(row) when Enter or Space is
pressed, and include an appropriate role (e.g., role="button") and
aria-label/aria-describedby as needed to convey purpose; ensure styling and
focus outline are preserved so keyboard focus is visible.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: bfc6c94d-6fa9-4cf7-9b36-95d99428637c

📥 Commits

Reviewing files that changed from the base of the PR and between f20085e and 52be397.

📒 Files selected for processing (1)
  • packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx

Comment thread packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx Outdated
Comment thread packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants